<template>
	<view class="pl15 pr15" v-show="isShow">
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼</view>
			</view>
			<view class="d-flex mt5">
				<view class="">
					<view class="height-20 w-100 d-flex-center mt20" v-for="item in 5" :key="item">
						<view class="count font-white font-14">{{item}}</view>
					</view>
				</view>
				<view class="h-100 flex-1 d-flex flex-wrap pl5">
					<view class="height-20 width-20 d-flex-center mt20" v-for="(item,index) in oneBuildStatus" :key="index">
						<view class="wh_60 d-flex-center borderRadius6p"
							:class="classroomDataStatus[item.socketColor]">
							<image style="width: 36px; height: 36px;" mode="aspectFill" :src="classroomDataBgImg[index]">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">2号楼</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="">
					<view class="height-20 w-100 d-flex-center mt20" v-for="item in 5" :key="item">
						<view class="count font-white font-14">{{item}}</view>
					</view>
				</view>
				<view class="h-100 flex-1 d-flex flex-wrap pl5">
					<view class="height-20 width-20 d-flex-center mt20" v-for="(item,index) in twoBuildStatus" :key="index">
						<template v-if="(index!=14 && index!=19 && index!=24)">
							<view class="wh_60 d-flex-center borderRadius6p"
								:class="classroomDataStatus[item.socketColor]">
								<image style="width: 36px; height: 36px;" mode="aspectFill" :src="classroomDataBgImg[index]">
								</image>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">3号楼</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="">
					<view class="height-20 w-100 d-flex-center mt20" v-for="item in 5" :key="item">
						<view class="count font-white font-14">{{item}}</view>
					</view>
				</view>
				<view class="h-100 flex-1 d-flex flex-wrap pl5">
					<view class="height-20 width-20 d-flex-center mt20" v-for="(item,index) in threeBuildStatus" :key="index">
						<view class="wh_60 d-flex-center borderRadius6p"
							:class="classroomDataStatus[item.socketColor]">
							<image style="width: 36px; height: 36px;" mode="aspectFill" :src="classroomDataBgImg[index]">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import {
		queryOneCountStatusByApp,
		queryTwoCountStatusByApp,
		queryThreeCountStatusByApp,
	} from "@/api/headmaster/index.js"

	const kt_border = require('@/static/img/login/kt_border.png')
	const d_border = require('@/static/img/login/d_border.png')
	const cz_border = require('@/static/img/login/cz_border.png')
	const ysj_border = require('@/static/img/login/ysj_border.png')
	const xyj_border = require('@/static/img/login/xyj_border.png')

	export default {
		data() {
			return {
				timeout: [],

				classroomDataStatus: ['bgColor_info', 'bgColor_success', 'bgColor_danger', 'bgColor_blue',
					'bgColor_warning', 'bgColor_red', 'bgColor_orange', 'bgColor_warning2'
				],
				classroomDataBgImg: [kt_border, d_border, cz_border, ysj_border, xyj_border,
					kt_border, d_border, cz_border, ysj_border, xyj_border,
					kt_border, d_border, cz_border, ysj_border, xyj_border,
					kt_border, d_border, cz_border, ysj_border, xyj_border,
					kt_border, d_border, cz_border, ysj_border, xyj_border
				],

				oneBuildStatus: [],
				twoBuildStatus: [],
				threeBuildStatus: [],
				
				isShow: false
			}
		},
		mounted() {
			this.queryOneCountStatusByApp()
			this.queryTwoCountStatusByApp()
			this.queryThreeCountStatusByApp()

			// this.setupTimer()
			this.isShow = true
		},
		methods: {
			doRefresh() {
				this.queryOneCountStatusByApp()
				this.queryTwoCountStatusByApp()
				this.queryThreeCountStatusByApp()
			},
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryOneCountStatusByApp()
					_this.queryTwoCountStatusByApp()
					_this.queryThreeCountStatusByApp()
				}, 10000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
						item = null
					})
				}
			},
			async queryOneCountStatusByApp() {
				await queryOneCountStatusByApp().then(res => {
					this.oneBuildStatus = res.object
				})
			},
			async queryTwoCountStatusByApp() {
				await queryTwoCountStatusByApp().then(res => {
					this.twoBuildStatus = res.object
				})
			},
			async queryThreeCountStatusByApp() {
				await queryThreeCountStatusByApp().then(res => {
					this.threeBuildStatus = res.object
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	@import url("@/static/css/operationData.css");

	.width-10 {
		width: 10%;
	}

	.width-20 {
		width: 20%;
	}

	.width-90 {
		width: 90%;
	}

	.height-20 {
		height: 80rpx;
	}

	.wh_60 {
		width: 100rpx;
		height: 100rpx;
	}

	.borderRadius6p {
		border-radius: 6px;
	}

	.count {
		width: 60rpx;
		height: 60rpx;
		line-height: 56rpx;
		text-align: center;
		border: 4rpx solid #07c160;
		border-radius: 50%;
	}

	.item_box {
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.10);
	}

	.line {
		width: 10rpx;
		height: 32rpx;
		background: #3276ff;
		border-radius: 14rpx;
	}

	.title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}
</style>